<template>
	<div>

		<!-- 状态切换与关键词搜索 -->
		<div class="action-wrap">
			<el-tabs v-model="status" @tab-click="findUsers">
				<el-tab-pane label="全部" name="-1"></el-tab-pane>
				<el-tab-pane label="正常" name="0"></el-tab-pane>
				<el-tab-pane label="冻结" name="1"></el-tab-pane>
			</el-tabs>
			<el-form size="small" @submit.prevent.native="findUsers">
				<el-form-item>
					<el-input placeholder="输入用户昵称、手机号或邮箱" v-model="keyword" maxlength="20" prefix-icon="el-icon-search">
						<el-button slot="append" native-type="submit">搜索</el-button>
					</el-input>
				</el-form-item>
			</el-form>
		</div>

		<!-- 用户列表 -->
		<el-table class="users-wrap" :data="users" v-loading="loading" stripe>
			<el-table-column label="头像">
				<template slot-scope="scope">
					<div class="avatar-wrap">
						<el-avatar class="avatar" :src="scope.row.avatarUrl" shape="square"></el-avatar>
						<span class="name elip" :title="scope.row.name">{{scope.row.name}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="手机号" prop="phone" align="center"></el-table-column>
			<el-table-column label="邮箱" align="center" :formatter="row => row.email || '-'"></el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-button size="mini" :type="scope.row.status == 0 ? 'success' : 'danger'" plain :title="'点击' + (scope.row.status == 0 ? '冻结' : '启用')"
					 @click="updateStatus(scope.row)">
						{{scope.row.status == 0 ? '正常' : '冻结'}}
					</el-button>
				</template>
			</el-table-column>
			<el-table-column label="更多信息" type="expand" width="100px">
				<template slot-scope="scope">
					<div class="form-wrap">
						<el-form label-position="left">
							<el-form-item label="性别">
								<span v-if="scope.row.gender">{{scope.row.gender == 1 ? '男' : '女'}}</span>
								<span v-else>-</span>
							</el-form-item>
							<el-form-item label="生日">
								<span v-if="scope.row.birthday">{{scope.row.birthday.split(' ')[0]}}</span>
								<span v-else>-</span>
							</el-form-item>
							<el-form-item label="地区">
								<span v-if="scope.row.region">{{scope.row.region}}</span>
								<span v-else>-</span>
							</el-form-item>
							<el-form-item label="个性签名">
								<span v-if="scope.row.motto">{{scope.row.motto}}</span>
								<span v-else>-</span>
							</el-form-item>
						</el-form>
						<el-form label-position="left">
							<el-form-item label="上次登录">
								<span v-if="scope.row.loggedTime">{{scope.row.loggedTime}}</span>
								<span v-else>-</span>
							</el-form-item>
							<el-form-item label="上次登录IP">
								<span v-if="scope.row.loggedIp">{{scope.row.loggedIp}}</span>
								<span v-else>-</span>
							</el-form-item>
							<el-form-item label="登录到期">
								<span v-if="scope.row.expireTime">{{scope.row.expireTime}}</span>
								<span v-else>-</span>
							</el-form-item>
						</el-form>
						<el-form label-position="left">
							<el-form-item label="注册时间">
								<span v-if="scope.row.createTime">{{scope.row.createTime}}</span>
								<span v-else>-</span>
							</el-form-item>
							<el-form-item label="注册渠道">
								<span>{{scope.row.createFrom | getRegisterChannel}}</span>
							</el-form-item>
						</el-form>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="small" icon="el-icon-warning" @click="cancelAccount(scope.row)">注销用户</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页条 -->
		<div class="pagination-wrap" v-show="totalSize > pageSize">
			<el-pagination hide-on-single-page background @size-change="pageSizeChange" @current-change="pageNumberChange"
			 :current-page="pageNumber" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
			 :total="totalSize">
			</el-pagination>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				users: [],
				status: '-1',
				keyword: '',
				loading: false,
				pageNumber: 1,
				pageSize: 10,
				totalSize: 0
			}
		},
		created() {
			this.findUsers();
		},
		filters: {
			getRegisterChannel(code) {
				let name = '';
				switch (code) {
					case 0:
						name = '商城PC端';
						break;
					case 0:
						name = '商城APP端';
						break;
					case 0:
						name = '商城小程序端';
						break;
					case 0:
						name = '商城手机H5端';
						break;
					default:
						name = '商城管理平台';
						break;
				}
				return name;
			}
		},
		methods: {
			findUsers(isSwitchPage = false) {
				if (!isSwitchPage) this.pageNumber = 1;

				this.loading = true;
				const {
					status,
					keyword,
					pageNumber,
					pageSize
				} = this;
				this.$util.request('/user', {
					status,
					keyword,
					pageNumber,
					pageSize
				}, (res) => {
					this.loading = false;
					this.users = res.list;
					this.totalSize = res.totalRow;
				}, true);
			},
			updateStatus(item) {
				this.$util.requestWithConfirm(`确定${item.status == 0 ? '冻结' : '启用'}账号【${item.phone}】吗？`, '/user/updateStatus', {
					id: item.id
				}).then(_ => {
					this.findUsers(true);
				});
			},
			cancelAccount(item) {
				this.$util.requestWithConfirm(`确定注销账号【${item.phone}】吗？`, '/user/cancelAccount', {
					id: item.id
				}, '警告！该操作无法撤销，请谨慎操作').then(_ => {
					this.findUsers(true);
				});
			},
			pageSizeChange(e) {
				this.pageSize = e;
				this.findUsers(true);
			},
			pageNumberChange(e) {
				this.pageNumber = e;
				this.findUsers(true);
			}
		}
	}
</script>

<style lang="scss">
	.action-wrap {
		@extend %flex-align-center;

		.el-tabs {
			flex: 1;
			margin-right: 30px;
		}

		.el-input {
			width: 300px;
		}
	}

	.users-wrap {
		.cell {
			user-select: text;
		}

		.avatar-wrap {
			@extend %flex-align-center;

			.avatar {
				flex-shrink: 0;
			}

			.name {
				margin-left: 10px;
				max-width: 200px;
				display: inline-block;
			}
		}
	}

	.form-wrap {
		display: flex;
		justify-content: space-between;

		.el-form {
			flex: 1;

			label {
				width: 90px;
				color: #99a9bf;
			}

			.el-form-item {
				margin-bottom: 0;
			}
		}
	}
</style>
